import React from 'react'
import { Modal, Space, Button, Timeline, Empty } from 'antd'
import { negotiationList } from '@/request/callOrder/orderList.js'
import ServeInfoModal from './serveInfoModal';

//查看详情   协商历史进度
export default class ServeTimeLineModal extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      orderId: props.orderId ?? null,//订单详情整单id
      isModalOpen: props.isModalOpen ?? false, //弹窗显示隐藏
      data: [],//服务信息数据
      isServerInfoModal: false, // 查看服务信息图片或者视频的弹窗
      detailsData: null,//图片视频信息
    }
  }
  componentDidMount() {
    if (this.props.orderId) {
      this.getData()
    }
  }
  getData = async () => {
    let res = await negotiationList({ createType: '2', mhcDataId: this.state.orderId })
    if (res.code === 0) {
      this.setState({ data: res.data })
    }
  }
  //查看按钮显示
  getBtn = (value) => {
    if (value) {
      if (value.operateType) {
        // 在服务信息operateType返回  MHC_POSITION_PUNCH或者MHC_COMPLETE_SERVICE的时候 查看 图片或视频信息
        if (value.operateType === 'MHC_POSITION_PUNCH' || value.operateType === 'MHC_COMPLETE_SERVICE') {
          return <Button Button type='link' onClick={() => { this.setState({ isServerInfoModal: true, detailsData: value }) }}>查看</Button>
        }
        // 在服务信息operateType返回  MHC_MEMBER_SUCCESS_CHANGE   MHC_SERVICER_SUCCESS_CHANGE    MHC_REFUND_SUCCESS_ORDER_DETAIL_CLOSE   查看跳转至售后单详情页
        if (value.operateType === 'MHC_MEMBER_SUCCESS_CHANGE' || value.operateType === 'MHC_SERVICER_SUCCESS_CHANGE' || value.operateType === 'MHC_REFUND_SUCCESS_ORDER_DETAIL_CLOSE') {
          if (value.relationType) {
            let path = ''//跳转详情地址  relationType 0 跳转变更 1 跳转退款
            switch (value.relationType) {
              case '1':
                path = '/call/order/afterSaleOrder/refundDetails/' + value.dataId
                break
              case '0':
                path = '/call/order/afterSaleOrder/changeDetails/' + value.dataId
                break
            }
            return (path && path !== '') && <Button Button type='link' onClick={() => { this.props.history.push(path) }}>查看</Button>
          }
        }
      }
    }
  }
  //操作关闭服务信息查看图片视频弹窗
  getModalOpen = (value) => {
    this.setState({ isServerInfoModal: value })
  }
  render() {
    const { isModalOpen, data, isServerInfoModal, detailsData } = this.state;
    return (
      <div>
        <Modal width={'30%'} title={this.props.createType !== '1' ? "服务详情" : '协商历史'} open={isModalOpen} footer={null} onCancel={() => { this.props.getModalOpen(false) }}>
          {
            data && data.length > 0 ? <Timeline>
              {
                data && data.map((item, i) => {
                  let obj = null
                  if (item.content) {
                    obj = JSON.parse(item.content);
                  }
                  return <Timeline.Item color="#aaaaaa" style={{ paddingRight: 20 }}>
                    <Space>
                      <span>{obj.operateName}&nbsp;</span>
                      {/* {this.props.createType === '2' ? <span>{obj.operateName}&nbsp;</span> :<span>{obj.operateType}&nbsp;</span>} */}
                      {/* {this.props.createType === '1' && <span>{obj.operateType}&nbsp;</span>} */}
                      <span>&nbsp;{obj.operateTime}</span>
                    </Space>
                    <div style={{ alignItems: 'center' }}>
                      <span className='colContent'>{obj.content}{this.getBtn(obj)}</span>
                    </div>
                  </Timeline.Item>
                })
              }
            </Timeline> : <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />
          }

        </Modal>
        {
          // 订单状态下的图片视频查看详情弹窗
          isServerInfoModal && <ServeInfoModal isModalOpen={isServerInfoModal} detailsData={detailsData} getModalOpen={this.getModalOpen}></ServeInfoModal>
        }
      </div >
    )
  }
}
